<template>
  <div class="app-wrapper">
    <div class="logo"></div>
    <!-- 左侧菜单 -->
    <ElMenu class="sidebar-container"/>
    <!-- 右侧操作区域 -->
    <div class="main-container">
      <!-- 头部面包屑 -->
      <div class="header-main">
        <div></div> <!-- 其他内容可以放在左侧 -->
        <div v-if="isLoggedIn" class="user-info">
          欢迎您：{{ userName }}
          <el-button @click="logout" class="btn-logout" icon="el-icon-switch-button" size="small">退出</el-button>
        </div>
        <div v-else>
          <span>请登录</span>
        </div>
      </div>
      <!-- 内容展示区 -->
      <AppContent class="app-main" />
    </div>
  </div>
</template>

<script>
import AppContent from "./components/AppContent.vue";
import ElMenu from "./components/ElMenu/index.vue";
import {getUserInfo} from "@/api/system/user";
import HeaderNav from "./components/HeaderNav.vue";

export default {
  components: {
    AppContent,
    ElMenu,
    HeaderNav,
  },
  data() {
    return {
      userName: '', // 用户名
    };
  },
  computed: {
    isLoggedIn() {
      // 检查用户是否登录（假设 token 存储在 sessionStorage 中）
      return !!sessionStorage.getItem("token");
    },
  },
  methods: {
    logout() {
      // 清除 token 并执行登出逻辑
      sessionStorage.removeItem("token");
      this.userName = ''; // 清空用户名
      this.$message.success("登出成功");
      // 可能需要重定向到登录页面
      this.$router.replace("/login");
    },
    fetchUserName() {
      // 这里可以使用 API 获取用户名称
      // 假设你有一个 API 可以根据 token 获取用户信息
      const token = sessionStorage.getItem("token");
      console.log("API 响应:", token)
      if (token) {
        getUserInfo(token)
            .then(response => {
              console.log("API code:", response.code);
              // 检查响应状态码是否为 200
              if (response.code === 200) {
                console.log("API 响应:", response.data);
                this.userName = response.data.name; // 确保数据格式正确
              } else {
                console.error("获取用户信息失败，状态码:", response.status);
              }
            })
            .catch(error => {
              console.error("获取用户名失败:", error);
            });
      }
    },
  },
  created() {
    if (this.isLoggedIn) {
      this.fetchUserName(); // 获取用户名
    }
  },


  // mounted() {
  //   // 模拟获取用户名，可以根据实际情况调整
  //   if (this.isLoggedIn) {
  //     this.userName = "用户姓名"; // 这里可以从后端获取用户信息
  //   }
  // },
};
</script>

<style lang="less" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  .logo {
    background: url("~@/assets/bg/logo.png");
    background-size: 99% 99%;
    height: 50px;
    width: 230px;
  }
  .sidebar-container {
    width: 220px !important;
    background-color: #F8F8FF;
    margin-top: 55px;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;

    & > div {
      width: 211px !important;
    }
  }
  .main-container {
    min-height: 100%;
    -webkit-transition: margin-left 0.28s;
    transition: margin-left 0.28s;
    margin-left: 230px;
    position: relative;
  }
  .header-main {
    position: fixed;
    height: 50px;
    width: calc(100% - 200px);
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 使用 space-between 来分隔内容 */
    border-bottom: 1px solid #ddd;
    padding-left: 15px;
    padding-right: 15px; /* 为右侧留出空间 */
    box-sizing: border-box;
  }
  .user-info {
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  .app-main {
    min-height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
}
</style>
